<div class="container">
    <form class="form-signin" (submit) = "signup" #form ="ngForm">
      <h2 class="form-signin-heading">Please sign up</h2>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email"
       id="inputEmail" 
      class="form-control"
       placeholder="Email address" 
       name="email"

       [(ngModel)] = "signForms.email"
        #email ="ngModel"
       required 
       email ="true"
      >
      <div *ngIf = "email.invalid && (email.touched || email.dirty)"
    class="alert alert-danger">
    <div *ngIf = "email.errors.required">email is required</div>
    <div *ngIf = "email.errors.email">inputEmail is invalid</div>
    <!-- <div *ngIf ="email_err_msg" class="alert alert-danger">{{email_err_msg}}</div> -->
  </div>

      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" 
      id="inputPassword" 
      class="form-control" 
      placeholder="Password" 
      minlength="6"
      maxlength="18"
      name="ps"
      [(ngModel)] = 'signForms.password'
      #password ="ngModel"
      required>
      <div *ngIf = "password.invalid && (password.touched ||password.dirty)"
      class="alert alert-danger">
      <div *ngIf = "password.errors.required">password is required</div>

      <div *ngIf = "password.errors.minlength">minlength is 6</div>
      <div *ngIf = "password.errors.maxlength">maxlength is 18 </div>
    </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit" (click) ="signup()" [disabled] ="!form.form.valid">Sign up</button>
    </form>
   <div class="alert alert-danger" *ngIf="err_msg">{{err_msg}}</div>
<!-- 不加斜杠会默认是子路由路径 -->
    <p class="info"><a routerLink="/signin"> 
    <i>Already have an account? Go sign in</i>
    </a></p>
  </div>
